import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
import './index.less'
export default class Tabbar extends Component {
  state = {
    selectedTab: 'Home',
  }

  componentDidMount = () => {
    const path = this.props.match.path
    if (path === '/ || /home') {
      this.setState({
        selectedTab: 'Home'
      })
    }
    if (path === '/news') {
      this.setState({
        selectedTab: 'News'
      })
    }
    if (path === '/me') {
      this.setState({
        selectedTab: 'Me'
      })
    }
  }
    showview=(path)=>{
      this.props.history.push(path)
    }
  render() {
    return (
      <div className="tabbar">
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('../../states/home.png')}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('../../states/home-active.png')}) center center /  21px 21px no-repeat` }}
              />
            }
            title="首页"
            key="home"
            selected={this.state.selectedTab === 'Home'}
            onPress={() => this.showview('/home','Home')}
          >
          </TabBar.Item>

          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('../../states/news.png')}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('../../states/news-active.png')}) center center /  21px 21px no-repeat` }}
              />
            }
            title="消息"
            key="news"
            selected={this.state.selectedTab === 'News'}
            onPress={() => this.showview('/news','News')}
          >
          </TabBar.Item>

         <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('../../states/mine.png')}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('../../states/mine-active.png')}) center center /  21px 21px no-repeat` }}
              />
            }
            title="我的"
            key="me"
            selected={this.state.selectedTab === 'Me'}
            onPress={() => this.showview('/me','Me')}
          >
          </TabBar.Item>
        </TabBar>
      </div>
    )
  }
}
